import React ,{useState, useEffect}from 'react'
import {loginApi, userInfoApi, userMenuApi} from '../../apis/loginApi'
import '../../style/login.less'
import logo from '../../images/logo.png'
import { Button,Input,Checkbox, message, Spin} from 'antd'
import { UserOutlined, LockOutlined} from '@ant-design/icons';
import CryptoJS from 'crypto-js'
import {connect} from 'react-redux' 
import { setTokenAct, setUserInfoAct, setUserMenuAct, setUserRoleAct } from '../../store/actions/CommonAct'
import { decodeMsg, encodeMsg } from '../../utils'

 function Login(props) {

 const [id, setId] = useState(''),
       [password, setPassword] = useState(''),
       [remember, setRemember] = useState(false),
       [loading, setLoading] = useState(false)

       
       useEffect(() => {
            //在本地获取存储的登陆信息
            let cache = localStorage.getItem('remember-Info')
            console.log(cache)
            if (!!cache) { //如果有 将信息有字符串转为对象 并解密
                 cache = JSON.parse(decodeMsg(cache))
                 //设置 用户名
                 setId(cache.id)
                 //设置 密码
                 setPassword(cache.password)
                 //状态打钩
                 setRemember(true)
            }   
        }, [props])
//登陆事件
const loginEvt = async () =>{
    let obj = {
        id: id.trim(),
        password: password.trim()
    }
    obj.password = CryptoJS.MD5(obj.password).toString()
    setLoading(true)
    let result = await loginApi(obj)
    console.log(result)
    
    //添加token
    props.dispatch(setTokenAct(result.data.token)) 
    
    sessionStorage.setItem('login-Info','hahha')
    if(result.code !== 200) {
        message.error('用户登陆失败！请重试')
        setLoading(false)
        return 
    }
    let userInfo = await userInfoApi(obj.id)
    console.log(userInfo)
    if(userInfo.code !== 200) {
        message.error('用户登陆失败！请重试')
        setLoading(false)
        return
    }
    let menuInfo = await userMenuApi()
    //console.log(menuInfo)
    if (menuInfo.code !== 200) {
        message.error('用户登陆失败！请重试')
        setLoading(false)
        return
    }
    //let roleInfo = await userRoleApi(userInfo.data.role)
    //console.log(roleInfo)
    //if (roleInfo.code !== 200) {
       // message.error('用户登陆失败！请重试')
       // setLoading(false)
       // return
    //}
    if(remember) {
        //将信息存入localstorage
        localStorage.setItem('remember-Info',encodeMsg(JSON.stringify({id:id.trim(), password:password.trim()})))

    }
    
    props.dispatch(setUserInfoAct(userInfo.data))
    props.dispatch(setUserMenuAct(menuInfo.data))
    
    props.dispatch(setUserRoleAct(userInfo.data.role))

    setLoading(false)
     props.history.push('/home')
}    
    return (
        <div className="login-container">
            <p className="login-title gradient-text-two">远古超市<em>——您最近的超市</em></p>
            <div className="login-box">
                <Spin spinning={loading} size="large" tip="请求中..." >
                    <header className="gradient-text-one">远古超市<span>用户登录</span></header>
                    <article style={{display:'flex'}}>
                        <div className="login-logo">
                            <img src={logo} alt="logo" />
                        </div>
                        <div className="login-form" >
                            <p style={{width:'220px' ,marginTop:'15px'}}>
                                <Input  value={id} placeholder="请输入工号" prefix={<UserOutlined />} onChange={e => { setId(e.target.value) }}/>
                            </p>
                            <p style={{width:'220px' }}>
                                <Input.Password placeholder="请输入密码"  value={password} prefix={<LockOutlined />} onChange={e => { setPassword(e.target.value) }}/>
                            </p>
                            <p>
                                <Checkbox  checked={remember} onChange={e => {
                                    setRemember(e.target.checked)
                                }}>记住密码</Checkbox>
                            </p>
                            <Button type="primary" 
                            style={{width:'220px'}}
                            onClick={loginEvt}>登录</Button>
                        </div>
                            
                    </article>
                    <footer>技术由 xxxx 支持 &copy; 2021-forever</footer>
                </Spin>
         </div>    
    </div>
   
    )
}
export default connect()(Login)